<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>

  <title>Vite App</title>
</head>

<body>
    <div id="app" class="demo">
        "{ {5+number} }":{{5+number}}
        <br>
        "{ {ensure} }": {{ensure}}
        <br>
        "{ {ensure ? "one":"two"} }:"{{ensure ? "one":"two"}}
        <br>
        "{ {string.split()} }:" {{string.split()}}
        <br>
        "{ {string.split(" ")} }:" {{string.split(" ")}}
        <br>
        "{ {string.split("")} }:" {{string.split("")}}
        <br>
        "{ {string.split("").reverse()} }:" {{string.split("").reverse()}}
        <br>
        "{ {string.split("").reverse().join()} }:" {{string.split("").reverse().join()}}
        <br>
        "{ {string.split("").reverse().join("")} }:" {{string.split("").reverse().join("")}}
    </div>
    <br>

    <script>
        const app = Vue.createApp({
            data(){
                return {
                    number : 1,
                    string : 'ABCDEF!!! GHJKL!!!',
                    ensure: true
                }
            }
        }).mount("#app")


    </script>
</body>

</html>
